<template>
  <div :class="$style['scf-option-warpper']">
    <scf-option-box
      ref="optionBoxRef"
      :text="text"
      :type="type"
      :checked="checked"
      @change="onChangeValue"
    />
    <span
      :class="[$style['scf-option-name'], nameChecked ? $style['scf-option-name-checked'] : '']"
      @click="onClickOption"
      >{{ name }}</span
    >
  </div>
</template>

<script>
import OptionBox from '@/components/option-box/option-box';

export default {
  name: 'Option',
  components: {
    'scf-option-box': OptionBox,
  },
  props: {
    /** 选项对应的文字 */
    name: {
      type: String,
      default: '',
      require: true,
    },
    /** 选项对应的值 */
    value: {
      type: String,
      default: '',
      require: true,
    },
    /** 选项按钮上的文字 */
    text: {
      type: String,
      default: '',
    },
    /** 按钮的类型,checkbox和radio */
    type: {
      type: String,
      default: 'checkbox',
    },
    /** 是否选中 */
    checked: {
      type: [Boolean, undefined],
      default: undefined,
    },
  },
  data() {
    return {
      /** 用于控制name的颜色,根据返回的按钮当前的状态 */
      nameChecked: this.checked || false,
    };
  },
  watch: {
    checked: {
      handler(newValue) {
        this.nameChecked = newValue;
      },
      immediate: true,
    },
  },
  methods: {
    onChangeValue(checkedValue) {
      this.$emit('change', checkedValue, this.value);
      if (this.checked === undefined) {
        this.nameChecked = checkedValue;
      }
    },
    onClickOption() {
      this.$refs.optionBoxRef.onChangeChecked();
    },
  },
};
</script>
<style module lang="less">
@import '../../global.less';
.scf-option-warpper {
  cursor: pointer;
  display: inline-block;
}

.scf-option-name {
  padding-left: 10px;
  color: @little-title-color;
}

.scf-option-name-checked {
  color: @primary-color;
}
</style>
